<template>
  <div class="my-area-order">
    <c-title text="技能师傅订单"></c-title>
    <van-search v-model="value" placeholder="请输入订单号" shape="round">
      <template #left-icon>
        <van-popover v-model="showPopover" trigger="click" :actions="actions" @select="onSelect">
          <template #reference>
            <span style="display: flex;">{{ actions_name }}<van-icon name="arrow-down" class="arrow-down-sty" /></span>
          </template>
        </van-popover>
      </template>
      <template #right-icon>
        <van-button class="search" round color="#4978F8" @click="search">搜索</van-button>
      </template>
    </van-search>
    <van-tabs v-model="active" color="#4978F8" title-active-color="#4978F8" @click="change">
      <van-tab title="全部订单" name="all"></van-tab>
      <van-tab title="待接单订单" name="wait_accept"></van-tab>
      <van-tab title="待服务订单" name="wait_work"></van-tab>
      <van-tab title="已完成订单" name="completed"></van-tab>
      <van-tab title="超时退单" name="overtime"></van-tab>
      <van-tab title="已关闭订单" name="close"></van-tab>
    </van-tabs>

    <div class="order-detail" v-for="item in list" :key="item.id" @click="goOrderDetail(item)">
      <div class="order-sn">
        <span class="order-sn-color">订单号：{{ item.order_sn }}</span>
        <span class="order-sn-status">{{ item.status_name }}</span>
      </div>
      <div class="order-time" v-if="item.need_type == 1">预约时间:{{ item.start_time_str }}-{{ item.finish_time_str }}</div>
      <div class="order-time" v-if="item.need_type == 0">服务时间:{{ item.start_time_str }}</div>
      <div class="publish-pane">
        <img :src="item.has_one_member.avatar_image" />
        <div class="publish-right">
          <div class="publish-name">
            <div>
              <span>{{ item.order_address.realname }}</span>
              <span class="publish-mobile">({{ item.order_address.mobile }})</span>
            </div>
            <div @click.stop="goToAdress(item)">
              <i style="color: #4978f8;" class="iconfont icon-zx_map_local"></i>
            </div>
          </div>
          <div class="publish-address">
            <div>
              {{ item.order_address.address }}
            </div>
            <div class="distance" style="font-size: 0.8rem; color: #999;">
              {{ item.distance }}{{ item.unit }}
            </div>
          </div>
        </div>
      </div>
      <div class="tec-pane">
        <img :src="item.image_url" />
        <div class="tec-right">
          <div class="tec-name">{{ item.title }}</div>
          <div class="tec-content">{{ item.content }}</div>
          <div class="service-charge">服务费 ￥{{ item.service_fee }}</div>
        </div>
      </div>
      <div class="order-info">
        <p>技能师傅：{{ item.has_one_shifu.realname }}</p>
        <p>手机号：{{ item.has_one_shifu.mobile }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { Image as VanImage } from 'vant';
import { scrollMixin } from '../../../../../utils/mixin';
export default {
  mixins: [scrollMixin],
  components: { VanImage },
  data() {
    return {
      active: 'all',
      value: "",
      showPopover: false,
      list: [],
      actions: [
        { text: "师傅姓名", id: 1 },
      ],
      actions_name: "订单号",
      point: {},

      isLoadMore: true,
      page: 1,
      total_page: 0,
    };
  },
  activated() {
    if (localStorage.getItem('myLocation')) {
      let myLocation =JSON.parse(localStorage.getItem('myLocation'));
      this.point = myLocation.point;
      this.getData();
    }else{
      this.ready();
    }
  },
  methods: {
    goToAdress(item){
      let point = this.fun.bd_decrypt(item.longitude,item.latitude);
      this.fun.goToWXAdress(point, item.order_address.address, '');
    },
    search() {
      this.getData()
    },
    change() {
      this.getData()
    },
    ready() {
      this.fun
        .getLocation()
        .then(res => {
          this.point = res.point;
          this.getData();
        })
        .catch(err => {
          console.log(err);
        });
    },
    getMoreData() {
      this.isLoadMore = false
      if (this.page >= this.total_page) {
        return;
      }
      let page = this.page + 1;
      this.getData(page);
    },
    async getData(page = 1) {
      let json = {
        lng: this.point.lng,
        lat: this.point.lat,
        page,
      }
      if (this.active !== 'all') {
        json.tab = this.active;
      }
      if (this.value) {
        if (this.actions_name == '订单号') {
          json.order_sn = this.value;
        } else {
          json.shifu_name = this.value;
        }
      }

      let { result, data, msg } = await $http.get('plugin.be-within-call.frontend.area-manage.order', json, '')
      this.isLoadMore = true;
      if (result) {
        this.page = data.current_page;
        this.total_page = data.last_page;
        (page == 1) ? (this.list = data.data) : (this.list = this.list.concat(data.data))
      } else {
        this.$toast(msg);
      }
    },
    goOrderDetail({ order_id, status }) {
      let order_type = "";
      if(status == 3){
        order_type=1;
      }else if(status == 2){
        order_type = 2;
      }else if(status==-1){
        order_type=-1;
      }
      this.$router.push(
        this.fun.getUrl("anytimeSkillMasterOrderDetail", { order_id, order_type, name: 'area'})
      );
    },
    onSelect(val) {
      this.actions_name = val.text;
      this.actions = [{ text: val.text == "师傅姓名" ? "订单号" : "师傅姓名", id: val.text == "师傅姓名" ? 1 : 2 }];
    },
  }
};
</script>

<style scoped lang="scss">
::v-deep .van-icon-arrow-down {
  margin-right: 1rem;
}

::v-deep .van-field__left-icon {
  display: flex;
  align-items: center;
}

::v-deep .van-button {
  height: unset;
}

.my-area-order {
  .distance {
    font-weight: 400;
    color: #ff9c43;
    font-size: 0.65rem;
  }

  .order-info {
    margin-top: 0.9375rem;
    text-align: left;
    font-size: 0.8rem;
  }

  .order-detail {
    background: white;
    padding: 0.6rem;
    margin-top: 0.4rem;

    .order-sn {
      display: flex;
      justify-content: space-between;

      // 待接单 待审核
      .order-waite-color {
        color: #999 !important;
      }

      .order-service-color {
        color: #f84949 !important;
      }

      .order-sn-status {
        font-size: 0.65rem;
        font-weight: 400;
        color: #333;
      }

      .order-sn-color {
        font-size: 0.65rem;
        font-weight: 400;
        color: #999;
      }
    }

    .enterprise-order {
      margin-bottom: 0.6rem;
    }

    .order-time {
      background: rgba(255, 238, 223, 0.39);
      border-radius: 0.2rem;
      font-size: 0.65rem;
      font-weight: 400;
      color: #ff9c43;
      padding: 0.325rem 0;
      width: 100%;
      margin: 0.6rem 0;
    }

    .publish-pane {
      display: flex;
      margin-bottom: 1rem;

      img {
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        margin: 0;
      }

      .publish-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 0.2rem;
        flex: 1;

        .publish-name {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 0.75rem;
          font-weight: bold;
          color: #333;
          text-align: left;

          .publish-mobile {
            font-size: 0.65rem;
            font-weight: 400;
            color: #999;
          }
        }

        .publish-address {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 0.65rem;
          font-weight: 400;
          color: #999;
          text-align: left;
        }
      }
    }

    .tec-pane {
      background: rgba(245, 245, 245, 0.39);
      border-radius: 0.2rem;
      padding: 0.6rem;
      display: flex;

      img {
        width: 3.6rem;
        height: 3.6rem;
        background: rgba(232, 232, 232, 0.39);
        border-radius: 0.2rem;
        margin: 0;
      }

      .tec-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-align: left;
        margin-left: 0.3rem;

        .tec-name {
          font-size: 0.75rem;
          font-weight: 400;
          color: #333;
        }

        .tec-content {
          font-size: 0.7rem;
          font-weight: 400;
          color: #999;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          word-break: break-all;
          overflow: hidden;
        }

        .service-charge {
          font-size: 0.65rem;
          font-weight: 400;
          color: #ff9c43;
        }
      }
    }

    .evaluation-pane {
      width: 100%;
      text-align: right;
      margin-top: 0.6rem;
      margin-bottom: 0.4rem;

      .evaluation-card {
        background: rgb(73, 120, 248);
        border-radius: 0.875rem;
        color: white;
        padding: 0.3rem 1rem;
      }
    }
  }

  .arrow-down-sty {
    margin-left: 0.2rem;
  }

  .search {
    padding: 0.25rem 1rem;
  }
}
</style>
